<template>
    <div id="warnBind">
        <div class="warnBind_content">
            <h3 class="warnBind_title">账号绑定</h3>
            <div class="wechatBind">
                <img src="../../assets/images/erweima.jpg" width="200" height="200" alt=""><br>
                <span>扫描二维码，绑定舆情账号</span>
            </div>
            <el-divider></el-divider>
            <h3 class="warnBind_title">预警绑定</h3>
            <div class="tableBox">
                <el-table
                    :data="tableData"
                    border
                    class="sentimentTable"
                    style="width: 100%">
                    <el-table-column
                    width="50px"
                    prop="pageNo"
                    label="编号">
                    </el-table-column>
                    <el-table-column
                    prop="wechatName"
                    label="微信昵称">
                    </el-table-column>
                    <el-table-column
                    prop="remarks"
                    label="备注">
                    </el-table-column>
                    <el-table-column
                    prop="time"
                    label="申请时间">
                    </el-table-column>
                    <el-table-column
                    prop="status"
                    label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == '0'">绑定申请中</span>
                        <span v-else>已绑定</span>
                    </template>
                    </el-table-column>
                    <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == '0'" class="tableBtn bind">绑定</span>
                        <span v-else class="tableBtn unbundling">解绑</span>
                        <span v-if="scope.row.status == '0'" class="tableBtn ignore">忽略</span>
                        <span class="tableBtn remarks">备注</span>
                    </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    background
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="page.pageSize"
                    :page-size="page.size"
                    layout="prev, pager, next"
                    :total="page.total"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import '../../assets/css/warnbind.css'
export default {
    data(){
        return{
            tableData: [{
                pageNo: '1',
                wechatName: '小雪',
                remarks: '',
                time: '2020-06-14 23:22:33',
                status: '0', // 0：绑定申请中，1：已绑定
                id: '34'
            },{
                pageNo: '2',
                wechatName: 'zhangsan',
                remarks: '德文德',
                time: '2020-06-15 23:22:33',
                status: '1',
                id: '341'
            }],
            page: {
                filterText: "",
                currentPage: 1,
                pageSize: [10, 20, 30, 50, 100],
                size: 10,
                total: 100
            }
        }
    },
    methods:{

    }
}
</script>